import React, { Component } from 'react';
import { ScrollView, Text } from 'react-native';
import _ from "lodash";
import { Actions } from 'react-native-router-flux';
import styles from './styles.js';
import Paragraph from "./components/paragraph";

const renderPgp = (data, index) => {
  return _.map(data, (d, i) => {
    const _index = index ? `${index}.${i + 1}` : i + 1;
    if (d.children) {
      return (
        <Paragraph
          index={_index}
          title={d.title}
          text={d.text}
          key={_index}
        >
          {renderPgp(d.children, _index)}
        </Paragraph>
      )
    }
    return (
      <Paragraph
        index={_index}
        title={d.title}
        text={d.text}
        key={_index}
      />
    )
  })
}
export default class Protocol extends Component {
  render() {
    return (
      <ScrollView style={{ padding: 20 }}>
        <Text style={{ fontSize: 24, fontWeight: '400', marginBottom: 20 }}>{this.props.file0.title}</Text>
        {renderPgp(this.props.file0.content)}
      </ScrollView>
    );
  }
}
